<div class="main-container">
    <div class="main-content">
        <div class="content-body">
            <div class="content-top-bar">
                <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
                    <nz-form-item>
                        <nz-form-label>报表选择</nz-form-label>
                        <nz-form-control>
                            <nz-select formControlName="type"
                                       [nzAllowClear]="false"
                                       [(ngModel)]="reportType"
                                       nzPlaceHolder="报表选择"
                                       (ngModelChange)="reportTypeChanged($event)">
                                <nz-option nzLabel="年度报表" nzValue="3"></nz-option>
                                <nz-option nzLabel="灌季报表" nzValue="2"></nz-option>
                                <nz-option nzLabel="月度报表" nzValue="1"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item>
                        <nz-form-label>年份</nz-form-label>
                        <nz-form-control>
                            <nz-select formControlName="year"
                                       [nzAllowClear]="false"
                                       nzPlaceHolder="年份">
                                <nz-option *ngFor="let val of yearList" [nzValue]="val" [nzLabel]='val'></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item *ngIf="reportType === '1'">
                        <nz-form-label>月份</nz-form-label>
                        <nz-form-control>
                            <nz-select formControlName="month"
                                       [nzAllowClear]="false"
                                       nzPlaceHolder="月份">
                                <nz-option nzLabel="4月" nzValue="4"></nz-option>
                                <nz-option nzLabel="5月" nzValue="5"></nz-option>
                                <nz-option nzLabel="6月" nzValue="6"></nz-option>
                                <nz-option nzLabel="7月" nzValue="7"></nz-option>
                                <nz-option nzLabel="8月" nzValue="8"></nz-option>
                                <nz-option nzLabel="9月" nzValue="9"></nz-option>
                                <nz-option nzLabel="10月" nzValue="10"></nz-option>
                                <nz-option nzLabel="11月" nzValue="11"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item *ngIf="reportType === '2'">
                        <nz-form-label>灌季</nz-form-label>
                        <nz-form-control>
                            <nz-select formControlName="season"
                                       [nzAllowClear]="false"
                                       nzPlaceHolder="灌季">
                                <nz-option nzLabel="夏秋灌" nzValue="夏秋灌"></nz-option>
                                <nz-option nzLabel="冬灌" nzValue="冬灌"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item>
                        <nz-form-control>
                            <button nz-button nzType="primary" (click)="getGridData()">
                                <i nz-icon nzType="search"></i>查询
                            </button>
                        </nz-form-control>
                    </nz-form-item>
                </form>
            </div>

            <div class="content-top-bar">
                <!--<div>-->
                <!--<nz-radio-group [nzButtonStyle]="'solid'" [(ngModel)]="reportType" (ngModelChange)="getGridData()"-->
                <!--style="margin-left: 15px">-->
                <!--<label nz-radio-button nzValue="1">月度报表</label>-->
                <!--<label nz-radio-button nzValue="2">灌季年度报表</label>-->
                <!--</nz-radio-group>-->
                <!--<span style="margin-left: 20px">单位： 亿m³</span>-->
                <!--</div>-->

                <div class="main-table-title">
                    {{searchForm.value.year}}年{{ searchForm.value.month ? searchForm.value.month + '月' : '' }}{{
                    searchForm.value.season || '' }}水情上报
                </div>
                <div *ngIf="isGhMng">
                    <nz-radio-group [(ngModel)]="radioValue" (ngModelChange)="getGridData()">
                        <label nz-radio nzValue="GHYS">固海系统</label>
                        <label nz-radio nzValue="GHKG">扩灌系统</label>
                    </nz-radio-group>
                </div>

                <div class="table-btn-group">
                    <!--<button nz-button nzType="primary" (click)="openDownloadModal()">填报模板下载</button>-->
                    <!--<button nz-button nzType="primary" (click)="submit(2)">提交</button>-->
                    <!--<button nz-button nzType="default" (click)="submit(1)">暂存</button>-->
                    <button nz-button nzType="primary" (click)="downLoadExcel()">
                        <i nz-icon nzType="download"></i><span>填报模板下载</span>
                    </button>
                    <nz-upload [nzAction]="uploadUrl" [nzCustomRequest]="customReq">
                        <button nz-button nzType="primary">
                            <i nz-icon nzType="upload"></i>
                            <span>数据导入</span>
                        </button>
                    </nz-upload>
                    <!--<button nz-button nzType="primary" (click)="openReportModal()">填报</button>-->
                    <button nz-button nzType="primary" (click)="submitMainTableData()">提交</button>
                </div>
            </div>

            <div *ngIf="reportType === '1'">
                <nz-table #monthlyTable
                          class="main-table"
                          [nzData]="monthlyTableData"
                          nzBordered
                          nzSize="middle">
                    <thead>
                    <tr class="custom-head">
                        <th rowspan="2">名称</th>
                        <ng-container *ngFor="let title of monthlyHeadArr">
                            <th [colSpan]="title !== '比计划超节情况' ? 2 : 4">{{title}}</th>
                        </ng-container>
                    </tr>
                    <tr class="custom-head">
                        <ng-container *ngFor="let title of monthlyHeadArr">
                            <th>本月</th>
                            <th *ngIf="title === '比计划超节情况'">%</th>
                            <th>累计</th>
                            <th *ngIf="title === '比计划超节情况'">%</th>
                        </ng-container>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let data of monthlyTable.data;let idx = index" [class]="{'even':idx % 2 === 1}" class="editable-row">
                        <ng-container *ngFor="let key of monthlyKeyArr">
                            <td>{{ data[key] }}</td>
                        </ng-container>
                    </tr>
                    </tbody>
                </nz-table>
                <nz-divider></nz-divider>
                <div>
                    <!--<div class="useWater-btn">-->
                        <!--<button nz-button nzType="primary" *ngIf="!isUseWaterTableEditable" (click)="startEdit(1)">-->
                            <!--填报-->
                        <!--</button>-->
                        <!--<ng-container *ngIf="isUseWaterTableEditable">-->
                            <!--<button nz-button nzType="primary" (click)="submit(2)">-->
                                <!--提交-->
                            <!--</button>-->
                            <!--<button nz-button nzType="primary" (click)="submit(1)">-->
                                <!--暂存-->
                            <!--</button>-->
                            <!--<button nz-button nzType="default" (click)="cancelEdit(1)">-->
                                <!--取消-->
                            <!--</button>-->
                        <!--</ng-container>-->
                    <!--</div>-->
                    <nz-table #areaTable
                              class="main-table"
                              [nzData]="areaTableData"
                              nzBordered
                              [nzFrontPagination]="false"
                              nzSize="middle">
                        <thead>
                        <tr class="custom-head">
                            <th colspan="2">受益单位</th>
                            <!--                        <th>合计</th>-->
                            <th *ngFor="let title of areaHeadArr">{{title}}</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let data of areaTable.data;let i = index" [class]="{'even':i % 2 === 1}" class="editable-row">
                            <td rowspan="2" *ngIf="i === 0" style="width: 120px">合计</td>
                            <td rowspan="2" *ngIf="i === 2" style="width: 120px">农业用水</td>
                            <td rowspan="2" *ngIf="i === 4" style="width: 120px">工业用水</td>
                            <td rowspan="2" *ngIf="i === 6" style="width: 120px">生活用水</td>
                            <td rowspan="2" *ngIf="i === 8" style="width: 120px">生态用水</td>
                            <td rowspan="2" *ngIf="i === 10" style="width: 120px">区外供水</td>
                            <td style="width: 100px">{{i%2 === 0 ? '本月' : '累计'}}</td>

                            <ng-container *ngFor="let key of areaHeadArr">
                                <td>
                                    <div class="editable-cell" *ngIf="!isEditableTd(data.id, i); else editRow">
                                        <div class="editable-cell-value-wrap">
                                            {{ data[key] }}
                                        </div>
                                    </div>
                                    <ng-template #editRow>
                                        <input type="text" nz-input [(ngModel)]="data[key]"/>
                                    </ng-template>
                                </td>
                            </ng-container>
                        </tr>
                        </tbody>
                    </nz-table>
                </div>
            </div>

            <div *ngIf="reportType === '3' || reportType === '2'">
                <nz-table #yearlyTable
                          class="main-table"
                          [nzData]="yearlyTableData"
                          nzBordered
                          nzSize="middle">
                    <thead>
                    <tr class="custom-head">
                        <th rowspan="2">名称</th>
                        <ng-container *ngFor="let title of monthlyHeadArr">
                            <th [rowSpan]="title !== '比计划超节情况' ? 2 : 1" [colSpan]="title !== '比计划超节情况' ? 1 : 2">
                                {{title}}
                            </th>
                        </ng-container>
                    </tr>
                    <tr class="custom-head">
                        <th>水量</th>
                        <th>%</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let data of yearlyTable.data;let idx = index" [class]="{'even':idx % 2 === 1}" class="editable-row">
                        <ng-container *ngFor="let key of yearlyKeyArr">
                            <td>{{ data[key] }}</td>
                        </ng-container>
                    </tr>
                    </tbody>
                </nz-table>
                <nz-divider></nz-divider>
                <div>
                    <!--<div class="useWater-btn">-->
                        <!--<button nz-button nzType="primary" *ngIf="!isUseWaterTableEditable" (click)="startEdit(2)">-->
                            <!--填报-->
                        <!--</button>-->
                        <!--<ng-container *ngIf="isUseWaterTableEditable">-->
                            <!--<button nz-button nzType="primary" (click)="submit(2)">-->
                                <!--提交-->
                            <!--</button>-->
                            <!--<button nz-button nzType="primary" (click)="submit(1)">-->
                                <!--暂存-->
                            <!--</button>-->
                            <!--<button nz-button nzType="default" (click)="cancelEdit(2)">-->
                                <!--取消-->
                            <!--</button>-->
                        <!--</ng-container>-->
                    <!--</div>-->
                    <nz-table #areaTable
                              class="main-table"
                              [nzData]="yearAreaTableData"
                              nzBordered
                              [nzFrontPagination]="false"
                              nzSize="middle">
                        <thead>
                        <tr class="custom-head">
                            <th>受益单位</th>
                            <!--                        <th>合计</th>-->
                            <th *ngFor="let title of areaHeadArr">{{title}}</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let data of areaTable.data;let i = index" [class]="{'even':i % 2 === 1}" class="editable-row">
                            <td *ngIf="i === 0" style="width: 120px">合计</td>
                            <td *ngIf="i === 1" style="width: 120px">农业用水</td>
                            <td *ngIf="i === 2" style="width: 120px">工业用水</td>
                            <td *ngIf="i === 3" style="width: 120px">生活用水</td>
                            <td *ngIf="i === 4" style="width: 120px">生态用水</td>
                            <td *ngIf="i === 5" style="width: 120px">区外供水</td>

                            <ng-container *ngFor="let key of areaHeadArr">
                                <td>
                                    <div class="editable-cell" *ngIf="!isYearEditableTd(data.id, i); else editRow">
                                        <div class="editable-cell-value-wrap">
                                            {{ data[key] }}
                                        </div>
                                    </div>
                                    <ng-template #editRow>
                                        <input type="text" nz-input [(ngModel)]="data[key]"/>
                                    </ng-template>
                                </td>
                            </ng-container>
                        </tr>
                        </tbody>
                    </nz-table>
                </div>
            </div>


        </div>

    </div>

</div>
<!--<nz-modal [(nzVisible)]="modalShow" [nzTitle]="modalTitle"-->
<!--(nzOnCancel)="onCancel()" [nzFooter]="null" nzWidth="350px">-->
<!--<div>-->
<!--<button nz-button nzType="primary" (click)="downLoadExcel()">-->
<!--<i nz-icon nzType="download"></i><span>填报模板下载</span>-->
<!--</button>-->
<!--<nz-upload [nzAction]="uploadUrl" [nzCustomRequest]="customReq"-->
<!--style="margin-left: 20px">-->
<!--<button nz-button><i nz-icon nzType="upload"></i><span>数据上传</span></button>-->
<!--</nz-upload>-->
<!--</div>-->

<!--</nz-modal>-->
<nz-modal nzClassName="custom-modal report-modal" nzWidth="80%" [(nzVisible)]="modalShow" [nzTitle]="modalTitle"
          (nzOnCancel)="onCancel()" [nzFooter]="null">

    <nz-card [nzExtra]="extraTemplate">
        <nz-table #modalTable
                  [nzData]="modalTableData"
                  nzBordered
                  [nzFrontPagination]="false"
                  nzSize="middle">
            <thead>
            <tr>
                <th nzWidth="250px">名称</th>
                <th>计划引水量</th>
                <th>实际引水量</th>
                <th>区间补水量</th>
                <th>支（斗）口计划配水量</th>
                <th>支（斗）口实际配水量</th>
                <th>自用水量</th>
                <th>干渠退水</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of modalTable.data" class="editable-row">
                <td>{{data.officeName}}</td>
                <td *ngFor="let item of modalKeyArr">
                    <div class="editable-cell" *ngIf="!modalEditCache[data.id].edit; else editRow">
                        <div class="editable-cell-value-wrap">
                            {{ data[item] }}
                        </div>
                    </div>
                    <ng-template #editRow>
                        <input type="text" nz-input [(ngModel)]="data[item]"/>
                    </ng-template>
                </td>
            </tr>
            </tbody>
        </nz-table>
    </nz-card>
    <ng-template #extraTemplate>
        <div class="extra-content">
            <div class="extra-form">
                <form nz-form [nzLayout]="'inline'" [formGroup]="modalForm">
                    <nz-form-item>
                        <nz-form-label>报表选择</nz-form-label>
                        <nz-form-control>
                            <nz-select formControlName="type"
                                       [nzAllowClear]="false"
                                       [(ngModel)]="modalReportType"
                                       nzPlaceHolder="报表选择"
                                       (ngModelChange)="reportModalTypeChanged($event)">
                                <nz-option nzLabel="年度报表" nzValue="3"></nz-option>
                                <nz-option nzLabel="灌季报表" nzValue="2"></nz-option>
                                <nz-option nzLabel="月度报表" nzValue="1"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item>
                        <nz-form-label>年份</nz-form-label>
                        <nz-form-control>
                            <nz-select formControlName="year"
                                       [nzAllowClear]="false"
                                       nzPlaceHolder="年份"
                                       (ngModelChange)="reportModalTypeChanged($event)">
                                <nz-option *ngFor="let val of yearList" [nzValue]="val" [nzLabel]='val'></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item *ngIf="modalReportType === '1'">
                        <nz-form-label>月份</nz-form-label>
                        <nz-form-control>
                            <nz-select formControlName="month"
                                       [nzAllowClear]="false"
                                       nzPlaceHolder="月份"
                                       (ngModelChange)="reportModalTypeChanged($event)">
                                <nz-option nzLabel="4月" nzValue="4"></nz-option>
                                <nz-option nzLabel="5月" nzValue="5"></nz-option>
                                <nz-option nzLabel="6月" nzValue="6"></nz-option>
                                <nz-option nzLabel="7月" nzValue="7"></nz-option>
                                <nz-option nzLabel="8月" nzValue="8"></nz-option>
                                <nz-option nzLabel="9月" nzValue="9"></nz-option>
                                <nz-option nzLabel="10月" nzValue="10"></nz-option>
                                <nz-option nzLabel="11月" nzValue="11"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item *ngIf="modalReportType === '2'">
                        <nz-form-label>灌季</nz-form-label>
                        <nz-form-control>
                            <nz-select formControlName="season"
                                       [nzAllowClear]="false"
                                       nzPlaceHolder="灌季"
                                       (ngModelChange)="reportModalTypeChanged($event)">
                                <nz-option nzLabel="夏秋灌" nzValue="夏秋灌"></nz-option>
                                <nz-option nzLabel="冬灌" nzValue="冬灌"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </form>
            </div>
            <div class="btn-group">
                <button nz-button nzType="primary" (click)="modalSubmit()">提交</button>
                <button nz-button (click)="onCancel()">取消</button>
            </div>
        </div>

    </ng-template>

</nz-modal>
